<template>
  <div class="data-table">
    <NDataTable
      :columns="columns"
      :data="data"
      :loading="loading"
      :pagination="pagination"
      :row-key="rowKey"
      @update:page="handlePageChange"
      @update:page-size="handlePageSizeChange"
    />
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue';
import type { DataTableColumns, PaginationProps } from 'naive-ui';

interface Props {
  /** 表格列配置 */
  columns: DataTableColumns<any>;
  /** 表格数据 */
  data: any[];
  /** 加载状态 */
  loading?: boolean;
  /** 分页配置 */
  pagination?: PaginationProps | false;
  /** 行唯一标识 */
  rowKey?: string | ((row: any) => string | number);
}

interface Emits {
  (e: 'update:page', page: number): void;
  (e: 'update:pageSize', pageSize: number): void;
}

const props = withDefaults(defineProps<Props>(), {
  loading: false,
  pagination: false,
  rowKey: 'id'
});

const emit = defineEmits<Emits>();

const handlePageChange = (page: number) => {
  emit('update:page', page);
};

const handlePageSizeChange = (pageSize: number) => {
  emit('update:pageSize', pageSize);
};
</script>

<style scoped>
.data-table {
  width: 100%;
}
</style>
